<template>
	<view>
		<view class="my-service-item">
			<view class="service-item" v-for="item in serviceData" :key="item._id">
				<view class="service-item-left" @tap="Records(item._id)">
					<image :src="item.leftImage" mode="" class="item-left-image"></image>
					<text>{{item.text}}</text>
				</view>
				<image :src="item.rightImage" mode="" class="item-right-image"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceData: [{
						_id: 1,
						leftImage: 'https://z3.ax1x.com/2021/04/29/gFnpHf.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '理财交易记录'
					},
					{
						_id: 2,
						leftImage: 'https://z3.ax1x.com/2021/04/29/gFuCs1.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '保险保单记录'
					},
					{
						_id: 3,
						leftImage: 'https://z3.ax1x.com/2021/04/29/gFuUQs.png',
						rightImage: 'https://z3.ax1x.com/2021/04/22/cOPp26.png',
						text: '支付交易记录'
					},
				]
			}
		},
		methods: {
			Records(id){
				if(id==1){
					uni.navigateTo({
						url:'/pages/transactionRecords/transactionRecords'
					})
				}else if(id==2){
					uni.showToast({
						icon:'none',
					    title: '暂无保险交易',
					    duration: 2000
					});
				}
			}
		}
	}
</script>

<style>
.my-service-item {
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 18rpx;
		margin: 0rpx auto 40rpx;
	}

	.service-item {
		width: 100%;
		height: 78rpx;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.06);
		margin-top: 20rpx;
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-between;
	}

	.service-item-left {
		width: 50%;
		height: 78rpx;
		/* border: 1rpx solid red; */
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(0,0,0,0.7);
		line-height: 79rpx;
		clear: both;
	}

	.item-left-image {
		width: 26rpx;
		height: 26rpx;
		/* border: 1rpx solid red; */
		float: left;
		margin: 29rpx 15rpx 0rpx 28rpx;
	}

	.item-right-image {
		width: 26rpx;
		height: 26rpx;
		/* border: 1rpx solid red; */
		margin: 28rpx;
	}
</style>
